#Prefs-logo {
	height: 60px;
}
body.prefs {
	// note : some parts are shared and defined in home.scss
	overflow-y: auto;
	background: $home-bg;
	a {
		color: black;
	}
	&.mobile {
		#prefs-tabs {
			.tab {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				padding: 4px;				
			}		
		}
	}

	#prefs-tabs {
		@include flexbox(row, stretch);
		height: 30px;
		.tab {
			background: $home-tab-bg;
			text-align: center;
			padding: 8px;
			margin-right: 10px;	
			z-index: 2;
			cursor: pointer;
			box-shadow: $home-mi-shadows;
			position: relative;
			&.selected {
				z-index: 4;
				cursor: inherit;
				box-shadow: $home-main-shadows;
				&::after {
					position: absolute;
					top: 25px;
					left: 0;
					width: 100%;
					height: 10px;
					background: $home-tab-bg;
					z-index: 5;
					content: ' ';
				}
				&::before {
					position: absolute;
					top: 30px;
					left: -10px;
					width: 130%;
					height: 15px;
					background: $home-tab-bg;
					z-index: 6;
					content: ' ';
				}
				
			}
		}
	}

	#prefs-main {
		position: relative;
		@include flexbox(row, center, center);
		z-index: 3;
		background: $home-tab-bg;
		box-shadow: $home-main-shadows;
		padding: 15px;
		#prefs-main-content {
			.page {
				display: none;
				&.selected {
					display: block;
				}
			}
		}
		h3 {
			margin-left: 8px;
			margin-bottom: 5px;
		}
	}
	#logo {
		margin-top: 6px;
	}
	p.links {
		margin-top: 5px;
		.username {
			margin: 0 5px;
			font-style: italic;
		}
		a {
			white-space:nowrap;
			margin: 0 5px;
		}
	}
	&.desktop {
		#home-main-content {
			width: 70%;
			max-width: 1000px;
			min-width: 800px;
		}
	}
	&.mobile {
		#logo {
			margin-top: 0;
			text-align: center;
		}
		#home-main-content {
			line-height: 25px;
		}
		p.links a {
			margin-right: 15px;
		}
		p.links a+a {
			margin-left: 15px;
		}
	}
}

#avatar-edit {
	@include flexbox(row, stretch);
}
#avatar-fields {
	flex: 1;
	@include flexbox(column);
}
.avatar-fields-row {
	@include flexbox(row, center);
	input, select, label, p {
		margin: 8px 4px;
	}
}
#avatar-preview {
	@include flex(1 0 220px);
	@include flexbox(row, center, center);
	height: 220px;
	img {
		max-height: 220px;
		max-width: 220px;
	}
}
body.mobile #avatar-preview {
	@include flex(1 0 100px);
	height: 100px;
	img {
		max-height: 100px;
		max-width: 100px;
	}
}

